<template>
    <div class="home-container" @wheel="handleWheel">
        <ul
            @transitionend="switching = false"
            ref="container"
            :style="{ marginTop }"
        >
            <CarouselItem
                :data="item"
                v-for="(item, index) in pageList"
                :key="index"
            ></CarouselItem>
        </ul>
        <div
            v-show="currentPageIndex !== 0"
            @click="handleClick(currentPageIndex - 1)"
            class="up-arrow icon"
        >
            <Icon type="arrowUp" />
        </div>
        <div
            v-show="currentPageIndex !== pageList.length - 1"
            @click="handleClick(currentPageIndex + 1)"
            class="down-arrow icon"
        >
            <Icon type="arrowDown" />
        </div>
        <div class="indicator">
            <div
                :class="{ active: currentPageIndex === index }"
                class="item"
                v-for="(item, index) in pageList"
                :key="index"
                @click="handleClick(index)"
            ></div>
        </div>
    </div>
</template>

<script>
import Icon from "@/components/Icon";
import CarouselItem from "./CarouselItem.vue";
export default {
    components: {
        Icon,
        CarouselItem,
    },
    data() {
        return {
            pageList: [
                {
                    bg: require("@/assets/bg/bg-1.jpg"),
                    text: "温柔暖阳，坦荡前方",
                },
                {
                    bg: require("@/assets/bg/bg-2.jpg"),
                    text: "山河万里，郁郁葱葱",
                },
                {
                    bg: require("@/assets/bg/bg-3.jpg"),
                    text: "世外桃源，繁华世界",
                },
            ],
            currentPageIndex: 0,
            containerHeight: 0,
        };
    },
    computed: {
        //控制轮播图位置
        marginTop() {
            return -this.currentPageIndex * this.containerHeight + "px";
        },
    },
    mounted() {
        this.setHeight();
        window.addEventListener("resize", this.setHeight);
    },
    beforeDestroy() {
        window.removeEventListener("resize", this.setHeight);
    },
    methods: {
        setHeight() {
            this.containerHeight = this.$refs.container.clientHeight;
        },
        handleClick(index) {
            this.currentPageIndex = index;
        },
        handleWheel(e) {
            if (this.switching) return;
            if (e.deltaY < -5 && this.currentPageIndex > 0) {
                //向上滚动
                this.switching = true;
                this.currentPageIndex--;
            } else if (
                e.deltaY > 5 &&
                this.currentPageIndex < this.pageList.length - 1
            ) {
                //向下滚动
                this.switching = true;
                this.currentPageIndex++;
            }
        },
    },
};
</script>

<style lang="less" scoped>
@keyframes up {
    0% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-10px);
    }
    50% {
        transform: translateY(10px);
    }
    100% {
        transform: translateY(0);
    }
}
@keyframes down {
    0% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(10px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}
@gap: 50px;
.home-container {
    height: 100%;
    overflow: hidden;
    position: relative;
    ul {
        width: 100%;
        height: 100%;
        position: relative;
        transition: 0.5s;
    }
    .icon {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-size: 30px;
        cursor: pointer;
        color: #fff;
    }
    .up-arrow {
        top: @gap;
        animation: up 2s infinite linear;
    }
    .down-arrow {
        bottom: @gap;
        animation: down 2s infinite linear;
    }
    .indicator {
        position: fixed;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        .item {
            width: 20px;
            height: 20px;
            background-color: rgb(110, 106, 106);
            border-radius: 50%;
            margin-bottom: 10px;
            cursor: pointer;

            &.active {
                background-color: #fff;
            }
        }
    }
}
</style>
